<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div id="app">
  <!-- 调用子组件 -->
  <cpn :cmessage="message" :cmovies="movies"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <h1>{{cmovies}}}</h1>
    <h1>{{cmessage}}</h1>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 注册子组件
  const cpn = {
    template: '#cpn',
    // 父传子: props
    props: {
      // 1.类型限制
      cmessage: String,		// 限制父组件传的是字符串类型
      cmovies: Array,		  // 限制父组件传的是数组类型
    }
  }


  const app = Vue.createApp({
    data(){
      return {
        message: '你好啊',
        movies: ['海王', '海贼王', '海尔兄弟']
      }
    },
    components: {
      //对象字面量增强写法的属性增强写法,注册局部组件
      cpn
    }
  });
  // 挂载vue实例
  app.mount('#app');
</script>
</body>
</html>